<template>
  <div id="container">
    <div class="ivu-card p-3">
      <div class="search_title d-flex align-items-center">门禁设备</div>
      <div class="serach_case"></div>
    </div>
    <div class="ivu-card flex-grow-1 p-4 m-3">
      <div
        class="tools d-flex align-items-center"
        style="
          width: 40%;
          display: flex;
          padding: 0px 2.5rem;
          margin-bottom: 2.5rem;
        "
      >
        <Input
          icon="ios-search"
          placeholder="请输入书名查询"
          v-model="searchItem.searchKey"
          @on-search="getData((page = 1))"
          search
          enter-button="搜索"
        />
        <Button class="addBtn" type="primary" @click="addAction"
          >+&nbsp;&nbsp;添加设备</Button
        >
      </div>

      <div style="padding: 0px 2.5rem">
        <Table :columns="columns" :data="datalist" :loading="loading">
          <template slot-scope="{ row }" slot="status">
            <Badge v-show="row.status == 1" color="green" text="正常" />
            <Badge v-show="row.status != 1" color="red" text="禁用" />
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <span class="btn" @click="edit(index)">编辑</span>
            <span class="btn" @click="deleteInfo(index)">删除</span>
            <span class="btn" @click="notice(index)">上报</span>
          </template>
        </Table>
        <div class="text-right mt-4">
          <Page
            :total="total"
            :page-size-opts="[10, 20, 40, 50, 100]"
            show-sizer
            :current="page"
            :page-size="pageSize"
            @on-page-size-change="pageSizeChange"
            @on-change="pageChange"
          ></Page>
        </div>
      </div>
    </div>

    <Drawer
      title="设备信息"
      v-model="showDevice"
      width="520"
      :mask-closable="false"
      :styles="styles"
    >
      <Form :model="formData">
        <FormItem label="设备类型" label-position="top" required>
          <Select v-model="formData.type" style="width: 200px">
            <Option
              v-for="item in typeList"
              :value="item.key"
              :key="item.key"
              >{{ item.title }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="设备名称" label-position="top" required>
          <Input v-model="formData.name" placeholder="设备名称" />
        </FormItem>
        <FormItem label="内网ip地址" label-position="top">
          <Input
            v-model="formData.ip"
            placeholder="内网IP地址如：192.168.2.250"
          />
        </FormItem>
        <FormItem label="设备管理员" label-position="top">
          <Input v-model="formData.loginId" placeholder="设备管理员账号" />
        </FormItem>
        <FormItem label="设备密码" label-position="top">
          <Input
            v-model="formData.password"
            type="password"
            placeholder="设备密码"
          />
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="showDevice = false"
          >取消</Button
        >
        <Button type="primary" @click="saveInfo">提交</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import index from "./index.js";
export default index;
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
<style lang="less" scoped>
#container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: transparent !important;

  .search_title {
    font-size: 16px;
    font-weight: 600;
    color: #515a6e;
    text-align: left;
    background-color: #fff;
    margin-bottom: 1rem;
    // .largeIcon {
    //   color: #9a70f3;
    //   background-color: #d4c2f9;
    // }
  }

  .serach_case {
    .ivu-form-item {
      margin-bottom: 10px;
    }
  }

  .tools {
    margin-bottom: 25px;

    .ivu-btn {
      margin: 0 10px 0 0;
    }
  }
}
</style>
